<!-- 生命周期 -->
<template>
  <div>
    <p>{{title}}</p>
    <p>{{num}}</p>
  </div>
</template>

<script>
export default {
  props:['title'],
  data () {
    return {
        num:10,
    };
  },
  beforeCreate(){
      console.log('1 --- 创建实例之前自动调用 beforeCreate()');
  },
  ceeate(){
      console.log('2 --- 实例创建完成自动调用 ceeate()');
  },
  beforeMount() {
      console.log('3 --- 模板编译之前 beforeMount()');
  },
  mounted(){
      console.log('4 --- 模板编译之后 mounted()');
  },
  beforeUpdate(){
      console.log(this.title +' 5 --- 模板更新之前 beforeUpdate()');
  },
  updated(){
      console.log(this.title +' 6 --- 模板内容更新完成 updated()');
  },
  activated() {
      console.log(this.title + ' 7 --- 通过keep-alive缓存之前调用');
  },
  deactivated() {
      console.log(this.title +' 8 --- keep-alive 缓存数据恢复调用');
  },
  beforeUnmount() {
      console.log(this.title +' 9 --- 实例在销毁之前调用 beforeUnmount()');
  },
  unmounted(){
      console.log(this.title +' 10 --- 实例销毁完成 unmounted()');
  },
  components: {},
  computed: {},
  methods: {}
}

</script>
<style lang='scss' scoped>
</style>